page {
  background-color: #23262D;
}

.header {
  width: 100%;
  background-color: #33363D;
}

.header-center {
  width: calc(100% - 60rpx);
  height: 88rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .location {
    width: 120rpx;
    display: flex;
    justify-content: space-between;

    .city {
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #DFDFDF;
      width: 85rpx;
      line-height: 88rpx;
    }

    image {
      width: 26rpx;
      height: 14rpx;
      margin-top: 37rpx;
    }
  }

  .head-choose {
    width: 328rpx;
    margin: 20rpx 116rpx 0 74rpx;
    height: 50rpx;
    background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
    box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
    border-radius: 12rpx;
    display: flex;
    align-items: center;

    .hot-active {
      width: 164rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-family: PingFangSC-Medium;
      font-size: 28rpx;
      color: #F5F5F5;
      text-align: center;
      border-radius: 11rpx 0 0 11rpx;
    }

    .new-active {
      width: 164rpx;
      height: 50rpx;
      line-height: 50rpx;
      font-family: PingFangSC-Medium;
      font-size: 28rpx;
      color: #F5F5F5;
      text-align: center;
      border-radius: 0 11rpx 11rpx 0;
    }

    .choose-new {
      width: 162rpx;
      height: 46rpx;
      line-height: 38rpx;
      font-family: PingFangSC-Medium;
      font-size: 28rpx;
      color: #969393;
      background-color: #33363D;
      text-align: center;
      border: 4rpx solid transparent;
      box-sizing: border-box;
      border-radius: 0 11rpx 11rpx 0;
    }

    .choose-hot {
      width: 162rpx;
      margin-left: 4rpx;
      height: 46rpx;
      line-height: 38rpx;
      font-family: PingFangSC-Medium;
      font-size: 28rpx;
      color: #969393;
      background-color: #33363D;
      text-align: center;
      border: 4rpx solid transparent;
      box-sizing: border-box;
      border-radius: 11rpx 0 0 11rpx;
    }
  }

  .date image {
    width: 38rpx;
    height: 38rpx;
    margin-top: 25rpx;
  }
}

.hot-list {
  margin-top: 35rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .hot-movie {
    margin-bottom: 15rpx;
    position: relative;
    width: calc(100% - 60rpx);
    height: 292rpx;
    border-radius: 20rpx;
    background-color: #33363D;
    display: flex;

    .hot-img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 210rpx;
      height: 312rpx;
      border-radius: 20rpx;
    }

    .hot-open {
      position: absolute;
      left: 68rpx;
      top: 86rpx;
      width: 76rpx;
      height: 76rpx;
    }

    .hot-info {
      margin-left: 232rpx;
      margin-right: 45rpx;
      width: 270rpx;

      .hot-name {
        width: 270rpx;
        height: 45rpx;
        line-height: 45rpx;
        margin-top: 24rpx;
        margin-bottom: 5rpx;
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hot-rate {
        height: 42rpx;
        line-height: 42rpx;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        margin-right: 8rpx;
        margin-bottom: 12rpx;
        color: #FFFFFF;

        text {
          font-family: PingFangSC-Medium;
          font-size: 30rpx;
          color: #FBC34A;
          line-height: 40rpx;
        }
      }

      .hot-person {
        opacity: 0.47;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #FFFFFF;
        height: 33rpx;
        margin-bottom: 5rpx;
        line-height: 33rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .hot-buy {
      height: 292rpx;
      display: flex;

      .hot-buy-btn {
        margin: auto;
        width: 108rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 24rpx;
        color: #FFFFFF;
        background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
        box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
        border-radius: 12rpx;
      }
    }
  }
}

.new {
  width: 100%;

  .new-title {
    margin-left: 30rpx;
    padding: 44rpx 0 16rpx 0;
    height: 50rpx;
    font-family: PingFangSC-Medium;
    font-size: 36rpx;
    line-height: 50rpx;
    color: #DFDFDF;
  }

  .pre-list {
    height: 370rpx;
    overflow: auto;
    display: flex;

    .pre-movie {
      width: 636rpx;
      height: 370rpx;
      margin-right: 32rpx;
      position: relative;

      .pre-img {
        width: 636rpx;
        height: 370rpx;
      }

      .pre-open {
        position: absolute;
        width: 76rpx;
        height: 76rpx;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .pre-cont {
        position: absolute;
        width: 636rpx;
        height: 40rpx;
        left: 0;
        bottom: 16rpx;
        padding-left: 25rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .pre-info {
          width: 500rpx;
          line-height: 40rpx;
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #DFDFDF;
        }

        .pre-time {
          width: 120rpx;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }
  .new-date-list {
    width: 250%;
    height: 52rpx;
    display: flex;
    overflow: auto;
    margin: 10rpx 0 14rpx;
  
    .date-item {
      border: 4rpx solid #979797;
      border-radius: 26rpx;
      width: 164rpx;
      height: 52rpx;
      box-sizing: border-box;
      margin-right: 32rpx;
      font-family: PingFangSC-Regular;
      line-height: 52rpx;
      text-align: center;
      font-size: 28rpx;
      color: #969393;
    }
  }
}

.pre-movie:first-child {
  margin-left: 30rpx;
}

.pre-movie:last-child {
  padding-right: 30rpx;
}

.new-list {
  margin-top: 35rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .new-movie {
    margin-bottom: 48rpx;
    position: relative;
    width: calc(100% - 60rpx);
    height: 280rpx;
    border-radius: 20rpx;
    background-color: #33363D;
    display: flex;

    .new-img {
      width: 234rpx;
      height: 280rpx;
      border-radius: 20rpx 0 0 20rpx;
    }

    .new-open {
      position: absolute;
      left: 68rpx;
      top: 86rpx;
      width: 76rpx;
      height: 76rpx;
    }

    .new-info {
      margin-left: 28rpx;
      margin-right: 45rpx;
      width: 240rpx;

      .new-name {
        width: 240rpx;
        height: 45rpx;
        line-height: 45rpx;
        margin-top: 26rpx;
        margin-bottom: 20rpx;
        font-family: PingFangSC-Medium;
        font-size: 36rpx;
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .new-rate {
        height: 42rpx;
        line-height: 42rpx;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        margin-right: 8rpx;
        margin-bottom: 16rpx;
        color: #FFFFFF;

        text {
          font-family: PingFangSC-Medium;
          font-size: 30rpx;
          color: #FBC34A;
          line-height: 40rpx;
        }
      }

      .new-person {
        opacity: 0.47;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #FFFFFF;
        height: 33rpx;
        margin-bottom: 5rpx;
        line-height: 33rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .new-buy {
      height: 292rpx;
      display: flex;

      .new-buy-btn {
        margin: auto;
        width: 108rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 24rpx;
        color: #FFFFFF;
        background-image: linear-gradient(150deg, #624BA3 0%, #CB4498 100%);
        box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
        border-radius: 12rpx;
      }
    }
  }
}



.date-item:first-child {
  margin-left: 30rpx;
}
